<template>
    <div class="container container--body">
        <div class="region region--full">
            <comImg :imgData="imgData"></comImg>
            <!-- <div class="market__data collapsed">
                <ul class="shareUl">
                    <li class="toggle__btn">
                        <el-icon>
                            <ArrowDown />
                        </el-icon> MARKET DATA -->
            <!-- <region></region> -->
            <!-- </li>
                    <li class="secord">S&P 500 Movers
                    </li>
                    <li v-for="item in shareData" :key="item.id">
                        <router-link to="">{{ item.name }}
                            <span :class="[item.data < 0 ? 'negative' : 'positive']">{{ item.value }}</span>
                        </router-link>
                    </li>
                </ul>
            </div> -->
            <pageHead :titleData="titleData"></pageHead>
        </div>
        <div class="region region--intraday">
            <div class="region region--full">
                <company :label="label" v-if="isOver" ref="comRef"></company>
                <div class="element element--paywall-promo">
                    <div class="promo__message">
                        <strong>Become a Sinopoly Watch subscriber today.</strong>
                        Get Unlimited Access for 50% off 1 Year
                    </div>
                    <div class="promo__btn">
                        <router-link id="cXLinkIdlwop4nno138rcv6o" class="btn btn--paywall">Subscribe Now</router-link>
                    </div>
                </div>
                <overview :label="label" v-if="isOver"></overview>
            </div>
        </div>
        <div class="region region--aside raside">
            <Aside ref="asideRef"></Aside>
        </div>
        <adverTiseMent></adverTiseMent>
    </div>
</template>
<script setup>
import comImg from '../../components/comImg/comImg.vue';
import region from '../home/region/region.vue'
import pageHead from '../../components/pageHead/pageHead.vue';
import company from './company.vue';
import overview from "./overview.vue"
import Aside from './aside.vue'
import adverTiseMent from '../home/adverTisement/adverTiseMent.vue';
const imgData = ref("../src/assets/banner.png"); //广告图
import { useRoute } from 'vue-router'
import homeRequest from "@/api/home.js";
const route = useRoute()
const asideRef = ref(null)
const comRef = ref(null)
watch(
    () => route.params.symbol, // 或者 route.query 根据你需要监听的参数类型
    async (newParams, oldParams) => {
        label.value = newParams
        if (token.value) {
            saveList()
            asideRef.value.getList()
            asideRef.value.getviewList()
            comRef.value.getLeftStock()
            comRef.value.getTime()
        }
    },
    {
        deep: true, // 深度监听对象内部属性的变化
    }
);
const titleData = ref({
    title: "",
    link: " Investing",
    name: " Quotes",
    name1: "Overview",
})
const shareData = ref([
    {
        name: 'MARKET DATA',
        value: '',
        id: 1
    },
    {
        name: 'MARKET DATA',
        value: '-10%',
        id: 2
    },
    {
        name: 'MARKET DATA',
        value: '14.5%',
        id: 3
    },
    {
        name: 'MARKET DATA',
        value: '12.5%',
        id: 4
    },
    {
        name: 'MARKET DATA',
        value: '',
        id: 5
    }
])
shareData.value.forEach((item) => {
    if (item.value && item.value !== null) {
        item.data = parseFloat(item.value) / 100;
    }
})
const searchData = ref('')
const label = ref('')
const isOver = ref(false)
import { getStorage } from "@/utils";
const token = ref('')
token.value = getStorage("spToken");
onMounted(() => {
    label.value = route.params.symbol
    isOver.value = true
    if (token.value) {
        saveList()
    }
})
// 调取保存记录接口
const saveList = () => {
    let data = {
        symbol: route.params.symbol
    }
    homeRequest.saveWatchData(data)
        .then((res) => {
            if (res.code === 0) {

            }
        })
}
</script>
<style scoped lang='scss'>
@media (min-width: 1296px) {
    .region--intraday {
        float: left;
        max-width: 960px;
    }

    .raside {
        float: right;
    }
}

.container .raside {
    max-width: 320px;
}

.collapsed {
    width: 100%;
    border: 1px solid #e1e1e1;
    border-bottom: 2px solid #3677a8;
    padding: 10px;
    margin-bottom: 20px;

    .shareUl {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        padding-right: 40px;

        li:first-child {
            border-right: 1px solid #e1e1e1;
            padding: 0 20px 0 0;
            margin-right: 20px;
            font-weight: 700
        }

        .secord {
            color: #6a6a6a;
            margin-left: -40px;
        }

        li {
            align-items: center;
            text-align: center;
            font-size: 0.75rem;

            span {
                display: inline-block;
                margin-left: 5px;
            }

            .positive {
                color: #367f2e
            }

            .negative {
                color: #b51a28;
            }
        }
    }

    .toggle__btn:hover {
        color: #3677a8;
    }
}

.element--paywall-promo {
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-left: solid 5px #4A9E3E;
    max-width: 960px;
    justify-content: space-between;

    .promo__btn .btn--paywall {
        border-radius: 18px;
        color: #202020;
        background-color: #fcb839;
        padding: 0 20px;
        font-weight: 700;
        display: inline-block;
        line-height: 36px;
        font-size: 12px;
    }
}
</style>